<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-form-item label="补仓类型：">
                  <el-select v-model="from.fillType" placeholder="请选择" class="selWidth" clearable>
                    <el-option :value="1" label="正常补仓"></el-option>
                    <el-option :value="2" label="爆仓补仓"></el-option>
                    <el-option :value="3" label="其他补仓"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="数据场：">
                  <el-select v-model="from.dataSource" placeholder="请选择数据场" clearable class="selWidth">
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="排除已补仓：">
                  <el-select v-model="from.isCover" placeholder="请选择" class="selWidth" clearable>
                    <el-option :value="1" label="是"></el-option>
                    <el-option :value="2" label="否"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="方向：">
                  <el-select v-model="from.direction" placeholder="请选择" class="selWidth" clearable>
                    <el-option :value="1" label="买多"></el-option>
                    <el-option :value="2" label="卖空"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right from">
                <el-form-item>
                  <el-button class="mr10" size="small" type="primary" @click="search()">搜索</el-button>
                  <el-button class="mr10" size="small" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button class="mr10" size="small" type="primary" @click="allAdd()">补仓</el-button>
          <el-button class="mr10" size="small" type="danger" @click="allDel()">删除</el-button>
          <el-button class="mr10" size="small" @click="exportTable()">导出表格</el-button>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
        @selection-change="onSelectTab" highlight-current-row>
        <el-table-column type="selection" width="55" :selectable="checkSelectable">
        </el-table-column>
        <el-table-column prop="id" label="ID" min-width="100" />
        <el-table-column prop="dataFactoryName" label="所属数据场" min-width="100" />
        <el-table-column prop="tradeName" label="交易员(SP开头资管)" min-width="150" />
        <el-table-column prop="contractMultiplier" label="乘数" min-width="100" />
        <el-table-column prop="fillType" label="补仓类型" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.fillType == 1">正常补仓</span>
            <span v-if="scope.row.fillType == 2">爆仓补仓</span>
            <span v-if="scope.row.fillType == 3">其他补仓</span>
          </template>
        </el-table-column>
        <el-table-column prop="turnover" label="应补金额" min-width="100" />
        <el-table-column prop="symbol" label="合约" min-width="100" />
        <el-table-column prop="entryVolume" label="手数" min-width="100" />
        <el-table-column prop="average" label="平均盈亏" min-width="100" />
        <el-table-column prop="entryPrice" label="开仓价" min-width="100" />
        <el-table-column prop="exitPrice" label="平仓价" min-width="100" />
        <el-table-column label="操作" min-width="130" fixed="right" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small" @click="handleDetails(scope.row)">详情</el-button> -->
            <el-button type="text" size="small" v-if="scope.row.isFilled == 2" @click="handleEdit(scope.row)">确认补仓</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
  import {
    // 数据场全列表
    datafieldGetOption
  } from '@/api/dataField'
  import {
    tradeaccountfillList,
    tradeaccountfillInfo,
    tradeaccountfillUpdateFill,
    tradeaccountfillDelete,
    tradeaccountfillExport
  } from '@/api/tradeaccountfill'
  export default {
    name: 'cover',
    data() {
      return {
        labelPosition: 'right',
        options: [],
        from: {
          fillType: '',
          dataSource:'',
          isCover:'',
          direction:'',
          page: 1,
          limit: 15,
        },
        loading: false,
        selection: [],
        tableData: {
          data: [],
          total: 0
        },
      }
    },
    mounted() {
      datafieldGetOption().then(res => {
        console.log('数据场全列表', res)
        this.options = res
        this.getlist()
      }).catch(err => {
        console.log(err)
      })
    },
    methods: {
      search() {
        this.from.page = 1
        this.from.limit = 15
        this.getlist()
      },
      reset() {
        this.from = {
          fillType: '',
          dataSource:'',
          isCover:'',
          direction:'',
          page: 1,
          limit: 15,
        }
        this.getlist()
      },
      // 选择
      onSelectTab(selection) {
        this.selection = []
        selection.forEach(item => {
          this.selection.push(item.id)
        })
      },
      checkSelectable(row){
        return row.isFilled == 2;
      },
      handleDetails(row){
        console.log('详情',row)
        tradeaccountfillInfo(row.id).then(res => {
          console.log('补仓列表详情', res)
        }).catch(err => {
          console.log(err)
        })
      },
      handleEdit(row){
        this.$confirm('确认补仓？')
          .then(_ => {
            console.log('补仓', row)
            tradeaccountfillUpdateFill([row.id]).then(res => {
              console.log(res)
              this.$message.success('补仓成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      handleDel(row) {
        this.$confirm('确认删除？')
          .then(_ => {
            console.log('删除', row)
            tradeaccountfillDelete([row.id]).then(res => {
              console.log(res)
              this.$message.success('删除成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      allAdd(){
        if (this.selection.length == 0) {
          return this.$message.error('至少选择一项')
        }
        console.log(this.selection)
        this.$confirm('确认补仓？')
          .then(_ => {
            tradeaccountfillUpdateFill(this.selection).then(res => {
              console.log(res)
              this.$message.success('补仓成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      allDel() {
        if (this.selection.length == 0) {
          return this.$message.error('至少选择一项')
        }
        console.log(this.selection)
        this.$confirm('确认删除？')
          .then(_ => {
            tradeaccountfillDelete(this.selection).then(res => {
              console.log(res)
              this.$message.success('删除成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      exportTable() {
        tradeaccountfillExport(this.from).then(res => {
          console.log('导出表格', res)
          window.open(res.filename);
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      },
      getlist() {
        this.loading = true
        tradeaccountfillList(this.from).then(res => {
          console.log(res)
          this.tableData.data = res.list
          this.tableData.total = res.total
          this.loading = false
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
      },
      pageChange(page) {
        this.from.page = page
        this.getlist()
      },
      handleSizeChange(val) {
        this.from.limit = val
        this.getlist()
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
